<template>
	<view>
		<f-navbar title="我的" fontColor="#ffffff" bgColor="#ffa200" :scrollTop="scrollTop" navbarType='0'></f-navbar>
		<view class="banner">
			<view class="sbanner">
				<view class="sinfor">
					<image src="../../static/other/111.jpg" style="width: 70px;height: 70px;border-radius: 50%;">
					</image>
					<view>用户名：贵阳</view>
					<view>个人信息></view>
				</view>
			</view>
			<view class="cntention">
				<view style="display: flex;justify-content: space-between;margin: 10px;align-items: center;">
					<view>我的余额</view>
					<view style="display: flex;">
						<button style="width: 80px;line-height: 40px;">提现</button>
						<button style="width: 80px;line-height: 40px;background-color: red;">充值</button>
					</view>
				</view>
				<view style="line-height: 50px;font-size: 30px;padding-left: 20px;color: red;">
					￥100.00
				</view>
				<view class="shopmoery">
					<view>
						<image src="../../static/mine-icon/daifukuan.png" style="width: 30px;height: 30px;">
						</image>
						<view>
							待付款
						</view>
					</view>
					<view>
						<image src="../../static/mine-icon/待发货.png" style="width: 30px;height: 30px;">
						</image>
						<view>待发货</view>
					</view>
					<view>
						<image src="../../static/mine-icon/待收货.png" style="width: 30px;height: 30px;">
						</image>
						<view>待收货</view>
					</view>
					<view>
						<image src="../../static/mine-icon/待评价.png" style="width: 30px;height: 30px;">
						</image>
						<view>待评价</view>
					</view>

				</view>

			</view>
			<view class="cntention1">
				<button type="default" class="btn" @click="onJump('release')"><uni-icons type="contact"
						size="30"></uni-icons>&emsp;我的发布</button>
				<button type="default" class="btn" @click="onJump('invite')" ><uni-icons type="personadd-filled"
						size="30"></uni-icons>&emsp;我的邀请</button>
				<button type="default" class="btn" @click="onJump('detail')"><uni-icons type="wallet" size="30"></uni-icons>&emsp;收支明细</button>
				<button type="default" class="btn"><uni-icons type="star" size="30"></uni-icons>&emsp;我的收藏</button>
				<button type="default" class="btn"><uni-icons type="pyq" size="30"></uni-icons>&emsp;圈子/关注</button>
				<button type="default" class="btn"><uni-icons type="settings" size="30"></uni-icons>&emsp;工具与服务</button>
				<button type="default" class="btn"><uni-icons type="chatbubble-filled"
						size="30"></uni-icons>&emsp;官方公告</button>
				<button type="default" class="btn"><uni-icons type="staff" size="30"></uni-icons>&emsp;商务合作</button>
				<button type="default" class="btn"><uni-icons type="chatbubble"
						size="30"></uni-icons>&emsp;我的投诉</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			onJump(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.banner {
		position: relative;

	}

	.sbanner {
		width: 100%;
		height: 150px;
		background-color: blue;
		color: white;
		display: flex;
		justify-content: space-around;
	}

	.sinfor {
		width: 100%;
		height: 100px;
		background-color: blue;
		color: white;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.cntention {
		position: absolute;
		top: 100px;
		left: 0;
		width: 90%;
		height: 200px;
		margin-left: 5%;
		background-color: white;
		border-radius: 10px;

	}

	.cntention1 {
		position: absolute;
		top: 320px;
		left: 0;
		width: 100%;
		height: 200px;
		background-color: aqua;
	}

	.shopmoery {
		display: flex;
		margin-top: 10px;
		justify-content: space-around;
		align-items: center;
		text-align: center;
	}

	.btn {
		padding-left: 10px;
		box-sizing: border-box;
		text-align: left;
		display: flex;
		height: 40px;
		align-items: center;
	}

	.btn uni-icons {}
</style>